<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="./public.css">
  <link rel="stylesheet" type="text/css" href="../iconfont/iconfont.css">
</head>

<body>
  <div class="style-group">
    <div class="ml_search_input">
      <input type="text">
      <i class="search_icon iconfont icon-osmcs-search"></i>
    </div>
  </div>
  <div class="style-group">
    <div class="ml_checkbox ml_uncheck">
      <i class="iconfont icon-osmcs-uncheck"></i>未选
    </div>
    <div class="ml_checkbox ml_dis_uncheck">
      <i class="iconfont icon-osmcs-uncheck"></i>不可选
    </div>
    <div class="ml_checkbox ml_checked">
      <i class="iconfont icon-osmcs-checked"></i>已选择
    </div>
    <div class="ml_checkbox ml_dis_checked">
      <i class="iconfont icon-osmcs-checked"></i>不可修改
    </div>
  </div>
  <div class="style-group">
    <div class="ml_radio ml_uncheck">
      <i class="iconfont icon-osmcs-checkoff"></i>未选
    </div>
    <div class="ml_radio ml_dis_uncheck">
      <i class="iconfont icon-osmcs-checkoff"></i>不可选
    </div>
    <div class="ml_radio ml_checked">
      <i class="iconfont icon-osmcs-checkon"></i>已选择
    </div>
    <div class="ml_radio ml_dis_checked">
      <i class="iconfont icon-osmcs-checkon"></i>不可修改
    </div>
  </div>
  <div class="style-group">
    <div class="ml_switch ml_switched">
      <label></label>
    </div>
    <div class="ml_switch ml_dis_switched">
      <label></label>
    </div>
    <div class="ml_switch ml_noswitch">
      <label></label>
    </div>
    <div class="ml_switch ml_dis_noswitch">
      <label></label>
    </div>
  </div>
  <div class="style-group">
    <button class="ml_button_common">按钮</button>
    <button class="ml_button_common ml_button_dis">按钮</button>
    <button class="ml_button_line">按钮</button>
    <button class="ml_button_line ml_button_dis">按钮</button>
  </div>
  <div class="style-group">
    <input type="text" class="ml_input">
  </div>
  <div class="style-group">
    <div class="ml_select_box">
      <input class="ml_select_input ml_input" type="text"><span class="glyphicon glyphicon-play"></span>
      <div class="ml_select_drop">
        <div class="ml_select_drop_item">请选择</div>
        <div class="ml_select_drop_item">选项1</div>
        <div class="ml_select_drop_item">选项2</div>
        <div class="ml_select_drop_item">选项3</div>
        <div class="ml_select_drop_item">选项4</div>
        <div class="ml_select_drop_item">选项5</div>
        <div class="ml_select_drop_item">选项6</div>
      </div>
    </div>
  </div>
  <div class="style-group">
    <select class="ml_select">
      <option>全部</option>
      <option>全部</option>
      <option>全部</option>
      <option>全部</option>
    </select><span class="glyphicon glyphicon-play"></span>
  </div>
  <div class="style-group">
    <div class="ml_operate_group_shrink">
      <span class="ml_operate_shrink_icon"></span>
      <i class="iconfont icon-osmcs-edit"></i>
      <i class="iconfont icon-osmcs-trash"></i>
      <i class="iconfont icon-osmcs-like"></i>
    </div>
  </div>
  <div class="style-group">
    <button class="ml_button_common">打开消息提示框</button>
  </div>
  <div class="style-group">
    <div class="ml_tool_panel">
      <div class="ml_tool_bar">
        <div class="ml_search_input">
          <input type="text">
          <i class="search_icon iconfont icon-osmcs-search"></i>
        </div>
        <div class="ml_tool_extend_btn" onclick="$(this).parent().parent().toggleClass('extend_show')">
          <i class="iconfont icon-osmcs-drop-up"></i>
          <i class="iconfont icon-osmcs-drop-up1"></i>高级搜索
        </div>
        <div class="ml_button_group">
          <div class="ml_tb_del_button">
            <i class="del_icon iconfont icon-osmcs-trash"></i> 删除操作
          </div>
          <span class="ml_split_sign"></span>
          <div class="ml_tb_com_button">
            <i class="del_icon iconfont icon-osmcs-batchaudit"></i> 批量操作
          </div>
        </div>
      </div>
      <div class="ml_tool_extend compact_form">
        <div class="compact_form_item">
          <label>输入框：</label>
          <input>
        </div>
        <div class="compact_form_item">
          <label>输入框输：</label>
          <input>
        </div>
        <div class="compact_form_item">
          <label>下拉框：</label>
          <select class="ml_select">
            <option>全部</option>
            <option>全部</option>
            <option>全部</option>
            <option>全部</option>
          </select><span class="glyphicon glyphicon-play"></span>
        </div>
        <div class="compact_form_item">
          <label>输入框输入：</label>
          <input>
        </div>
        <div class="compact_form_item">
          <label>下拉框下：</label>
          <select class="ml_select">
            <option>全部</option>
            <option>全部</option>
            <option>全部</option>
            <option>全部</option>
          </select><span class="glyphicon glyphicon-play"></span>
        </div>
        <div class="compact_form_item">
          <label>下拉框下拉：</label>
          <select class="ml_select">
            <option>全部</option>
            <option>全部</option>
            <option>全部</option>
            <option>全部</option>
          </select><span class="glyphicon glyphicon-play"></span>
        </div>
        <div class="compact_form_item">
          <label>输入框输入框：</label>
          <input>
        </div>
        <div class="compact_form_item">
          <label>下拉框下拉框：</label>
          <select class="ml_select">
            <option>全部</option>
            <option>全部</option>
            <option>全部</option>
            <option>全部</option>
          </select><span class="glyphicon glyphicon-play"></span>
        </div>
        <div class="compact_form_item">
          <button class="ml_button_common">按钮</button>
        </div>
      </div>
    </div>
  </div>
  <div class="style-group">
    <table class="ml_table">
      <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
        <th>标题4</th>
        <th>标题5</th>
        <th class="ml_table_operate">操作</th>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
        <td>内容5</td>
        <td class="ml_table_operate">
          <div class="ml_operate_group_shrink">
            <span class="ml_operate_shrink_icon"></span>
            <i class="iconfont icon-osmcs-edit"></i>
            <i class="iconfont icon-osmcs-trash"></i>
            <i class="iconfont icon-osmcs-like"></i>
          </div>
        </td>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
        <td>内容5</td>
        <td class="ml_table_operate">
          <div class="ml_operate_group_shrink">
            <span class="ml_operate_shrink_icon"></span>
            <i class="iconfont icon-osmcs-edit"></i>
            <i class="iconfont icon-osmcs-trash"></i>
            <i class="iconfont icon-osmcs-like"></i>
          </div>
        </td>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
        <td>内容5</td>
        <td class="ml_table_operate">
          <div class="ml_operate_group_shrink">
            <span class="ml_operate_shrink_icon"></span>
            <i class="iconfont icon-osmcs-edit"></i>
            <i class="iconfont icon-osmcs-trash"></i>
            <i class="iconfont icon-osmcs-like"></i>
          </div>
        </td>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
        <td>内容5</td>
        <td class="ml_table_operate">
          <div class="ml_operate_group_shrink">
            <span class="ml_operate_shrink_icon"></span>
            <i class="iconfont icon-osmcs-edit"></i>
            <i class="iconfont icon-osmcs-trash"></i>
            <i class="iconfont icon-osmcs-like"></i>
          </div>
        </td>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
        <td>内容5</td>
        <td class="ml_table_operate">
          <div class="ml_operate_group_shrink">
            <span class="ml_operate_shrink_icon"></span>
            <i class="iconfont icon-osmcs-edit"></i>
            <i class="iconfont icon-osmcs-trash"></i>
            <i class="iconfont icon-osmcs-like"></i>
          </div>
        </td>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
        <td>内容5</td>
        <td class="ml_table_operate">
          <div class="ml_operate_group_shrink">
            <span class="ml_operate_shrink_icon"></span>
            <i class="iconfont icon-osmcs-edit"></i>
            <i class="iconfont icon-osmcs-trash"></i>
            <i class="iconfont icon-osmcs-like"></i>
          </div>
        </td>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
        <td>内容5</td>
        <td class="ml_table_operate">
          <div class="ml_operate_group_shrink">
            <span class="ml_operate_shrink_icon"></span>
            <i class="iconfont icon-osmcs-edit"></i>
            <i class="iconfont icon-osmcs-trash"></i>
            <i class="iconfont icon-osmcs-like"></i>
          </div>
        </td>
      </tr>
    </table>
  </div>
  <div class="style-group">
    <div class="ml_left_menu">
      <div class="ml_left_menu_item">
        <div class="ml_left_menu_name">
          菜单1<span class="glyphicon glyphicon-play"></span>
        </div>
        <div class="ml_left_submenu">
          <div class="ml_left_menu_name">菜单11</div>
          <div class="ml_left_menu_name">菜单12</div>
          <div class="ml_left_menu_name">菜单13</div>
          <div class="ml_left_menu_name">菜单14</div>
        </div>
      </div>
      <div class="ml_left_menu_item">
        <div class="ml_left_menu_name">
          菜单1<span class="glyphicon glyphicon-play"></span>
        </div>
        <div class="ml_left_submenu">
          <div class="ml_left_menu_name">菜单11</div>
          <div class="ml_left_menu_name">菜单12</div>
          <div class="ml_left_menu_name">菜单13</div>
          <div class="ml_left_menu_name">菜单14</div>
        </div>
      </div>
      <div class="ml_left_menu_item">
        <div class="ml_left_menu_name">
          菜单1<span class="glyphicon glyphicon-play"></span>
        </div>
        <div class="ml_left_submenu">
          <div class="ml_left_menu_name">菜单11</div>
          <div class="ml_left_menu_name">菜单12</div>
          <div class="ml_left_menu_name">菜单13</div>
          <div class="ml_left_menu_name">菜单14</div>
        </div>
      </div>
    </div>
  </div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
  <div class="style-group"></div>
</body>
<style type="text/css">
.style-group {
  margin: 20px 10px;
}
</style>

</html>